<script setup>
const menuitems = [
  {
    title: "消费级产品",
    list: [
      {
        title: "X3",
      },
      {
        title: "GO3",
      },
      {
        title: "ONE RS",
      },
    ],
  },
  {
    title: "服务与技术支持",
    list: [
      {
        title: "使用帮助",
      },
      {
        title: "售后服务",
      },
      {
        title: "售后政策",
      },
      {
        title: "软件下载",
      },
    ],
  },
  {
    title: "关于我们",
    list: [
      {
        title: "公司简介",
      },
      {
        title: "多媒体库",
      },
      {
        title: "品牌新闻",
      },
      {
        title: "投稿活动",
      },
      {
        title: "加入我们",
      },
    ],
  },
  {
    title: "申请合作",
    list: [
      {
        title: "联系我们",
      },
      {
        title: "成为推广大使",
      },
      {
        title: "成为经销商",
      },
      {
        title: "SDK申请",
      },
      {
        title: "行业应用",
      },
    ],
  },
  {
    title: "专业级产品",
    list: [
      {
        title: "PRO2",
      },
      {
        title: "Titan",
      },
      {
        title: "Pro",
      },
    ],
  },
  {
    title: "购买产品",
    list: [
      {
        title: "在线购买",
      },
      {
        title: "回馈计划",
      },
    ],
  },
];
</script>
<template>
  <div class="bg-[#f5f5f5] border-t pt-[30px]">
    <Container top="0">
      <div class="grid grid-cols-2 lg:grid-cols-4 gap-[20px]">
        <ul
          v-for="menu in menuitems"
          class="leading-[24px] text-center lg:text-left"
        >
          <li class="pb-[5px]">{{ menu.title }}</li>
          <li
            v-for="item in menu.list"
            class="text-[12px] hover:text-[#333] cursor-pointer"
          >
            {{ item.title }}
          </li>
        </ul>
      </div>
      <div
        class="border-t-[1px] mt-[20px] text-[12px] pt-[20px] text-center lg:text-left"
      >
        Copyright © 2024 All Rights Reserved. 粤ICP备 10086号-4
      </div>
    </Container>
  </div>
</template>
<style scoped lang="scss"></style>
